<template>
  <div>
    <div class="outDiv">
      <scroller lock-x :on-refresh="refresh" :on-infinite="infinite">
        <div>
          <div>
            <div class="header">
              <div @click="commonJs.funs(preUrl)">
                <img class="imgIcon" src="~/static/icon/Rectangle-path.png" />
              </div>
              <h2>全部答疑列表</h2>
              <div @click="searchPopShow">
                <img  class="imgIcon" src="~/static/icon/answer_icon_filtrate.png" />
              </div>
            </div>
            <SearchPopModel :searchPopup="searchPopup" @hidePopup="hidePopup" @onlyHide="onlyHide"></SearchPopModel>
          </div>

          <div class="main">
            <ul class="aqList">
              <li class="aq_item" v-for="(item, index) of questionList" :key="index" >
                <!-- 右上角状态显示 -->
                <div :class="['floatRightDiv', item.status == 0 ? 'waitAnswer' : 'hasAnswer']">{{ item.status == 0 ? '待回复' : '已回复' }}</div>
                <!-- 人员信息及提问时间 -->
                <div class="content">
                  <div class="intro">
                    <div class="avatarAndIdentity">
                      <img class="avatar" :src="item.user_avatar" >
                      <span :class="['identity', item.user_type == 2 ? 'parent' : 'child']"></span>
                    </div>
                    <div class="nameAndTime">
                      <h3>{{ item.user_name }}</h3>
                      <p>{{ item.question_time }}</p>
                    </div>
                  </div>
                  <!-- 问题描述 -->
                  <div class="describe">{{ item.title }}</div>
                  <!-- 区域 -->
                  <div class="placeArea">
                    <span class="province">{{ item.user.area.labels.split(',')[0] }}</span>
                    <span class="schoolTitle">{{ item.user.school.title }}</span>
                  </div>
                  <!-- 点击查看并回复 -->
                  <div class="lookAndAnswer" @click="jumpToDetail(item)">
                    <p>点击查看并回复</p>
                    <div class="turnRight">
                      <img src="~/static/images/icon_arrows_more_40.png" alt="">
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <!-- <div class="noMore">没有更多了</div> -->
          </div>
          <div style="width: 7.5rem;height: 1.5rem;"></div>
        </div>
      </scroller>
    </div>
  </div>  
</template>

<script>
import SearchPopModel from '~/components/SearchPopModel'
import axios from '~/plugins/axios'
import ls from 'store2'
export default {
  components: {
    SearchPopModel,
  },
  data() {
    return {
      preUrl: ls.get('preUrl'),
      identity: 'parent', // 身份 --- parent家长、child学生
      searchPopup: false,
      sendObj: {
        status: null,
        start_date: null,
        end_date: null,
        page: 1
      },
      listQueryUrl: '',
      questionList: [], // 问答列表集合
      listData: [],
      // userImg: require('~/static/default_avatar.png')
    }
  },
  mounted() {
    // 获取类型
    const type = this.$route.query.type;
    if (type == 'noReply') {
      this.sendObj.status = 0;
    } else if (type == 'today'){
      // 获取当前日期
      const date = new Date();
      const todayDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      this.sendObj.status = null;
      this.sendObj.start_date = todayDate;
      this.sendObj.end_date = todayDate;
    }

    ls.set('urlType', this.$route.query.type)


    // 页面加载时获取数据
    this.getQuestionList();


    if (ls.get('preUrl') == '../answerQuestion') {
      this.preUrl = '../teachers/teaindex';
    } else {
      ls.set('preUrl', '../answerQuestion');
    }
    ls.remove('searchObj')

  },
  methods: {
    jumpToDetail(obj) {
      const newObj = JSON.stringify(obj)
      console.log(newObj)
      this.commonJs.gosto('/answerQuestion/detail', newObj);
    },
    searchPopShow() {
      this.searchPopup = true;
    },
    hidePopup(data) {
      this.searchPopup = data;
      let searchObj = ls.get('searchObj')
      this.sendObj.start_date = searchObj.startDate !== '' ? searchObj.startDate : null;
      this.sendObj.end_date = searchObj.endDate !== '' ? searchObj.endDate : null;
      if (searchObj.status == 'all') {
        this.sendObj.status = null;
      } else if (searchObj.status == 'yes') {
        this.sendObj.status = 1;
      } else {
        this.sendObj.status = 0;
      }
      this.sendObj.page = 1;
      this.questionList = [];
      this.getQuestionList();
    },
    onlyHide(data) {
      this.searchPopup = data;
    },
    // 获取列表
    getQuestionList() {
      axios.get('/university/yx-questions', this.sendObj).then(res => {
        this.listData = res.data;
        const arr = [];
        this.listData.forEach(item => {
          this.questionList.push(item);
        })
        for (let i = 0; i < this.questionList.length; i ++) {
          if (arr.indexOf(this.questionList[i]) == -1) {
            arr.push(this.questionList[i]);
          }
        }
        this.questionList = arr;

      }).catch((error) => {
        this.$vux.toast.text(error);
        this.$vux.loading.hide();
      })
    },
    infinite(done) {
      if (this.listData.length === 0) {
        setTimeout(() => {
          done(true)
        }, 1500)
        return;
      }
      setTimeout(() => {
        this.sendObj.page += 1
        this.getQuestionList()
        setTimeout(() => {
          done()
        })
      }, 1500)
    },
    refresh(done) {
      setTimeout(() => {
        this.questionList = [];
        this.sendObj.page = 1;
        this.getQuestionList()
        done()
      }, 1500)
    },

  }
}
</script>

<style lang="less" scoped>
  .outDiv {
		width: 100%;
		height: 100vh;
		background: #fff;

    .header {
      width: 100%;
      height: 0.88rem;
      text-align: right;
      padding: 0 0.3rem;
      background: transparent;
      font-size: 0.3rem;
      letter-spacing: 0.05rem;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      h2 {
        font-size: 0.36rem;
        font-weight:bold;
      }
    }

		.main {
      padding: 0.15rem 0.32rem 0;
      .aqList {
        list-style: none;
        padding-left: 0;
        .aq_item {
          margin-top: 0.41rem;
          padding-bottom: 0.36rem;
          width: 100%;
          min-height: 3rem;
          box-shadow:0px 2px 10px 0px rgba(153,153,153,0.2);
          border-radius: 0.1rem;

          .floatRightDiv {
            float: right;
            width: 1.2rem;
            height: 0.64rem;
            line-height: 0.64rem;
            color: #FFF;
            font-size: 0.26rem;
            text-align: center;
            
          }

          .content {
            padding: 0.32rem 0.24rem 0;
            
            .intro {
              display: flex;
              justify-content: flex-start;
              margin-bottom: 0.24rem;
              .avatarAndIdentity {
                position: relative;
                .avatar {
                  width: 0.8rem;
                  height: 0.8rem;
                  border-radius: 50%;
                }
                .identity {
                  display: inline-block;
                  width: 0.8rem;
                  height: 0.32rem;
                  position: absolute;
                  bottom: 0;
                  left: 0;
                }
                .parent { 
                  background: url('~/static/images/icon_patriarch.png') no-repeat;
                  background-size: 100% 100%;
                }
                .child { 
                  background: url('~/static/images/icon_student.png') no-repeat;
                  background-size: 100% 100%;
                }
              }
              .nameAndTime {
                margin-left: 0.24rem;
                h3 {
                  color: #222;
                  font-size: 0.3rem;
                  font-weight: bold;
                  padding-bottom: 0.16rem;
                  line-height: 0.26rem;
                }
                p {
                  color: #c7c7c7;
                  font-size: 0.28rem;
                  line-height: 0.26rem;
                }
              }
            }

            .describe {
              color: #222;
              font-size: 0.3rem;
              line-height: 0.48rem;
              margin-bottom: 0.12rem;

              word-break: break-all;
              display: -webkit-box;
              /*! autoprefixer: off */
              -webkit-box-orient: vertical;
              /* autoprefixer: on */
              text-overflow: ellipsis;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }

            .placeArea {
              margin-bottom: 0.12rem;

              span {
                color: #999;
                font-size: 0.26rem;
                display: inline-block;
                height: 0.53rem;
                line-height: 0.53rem;
                background: #F7F7FA;
                border-radius: 0.27rem;
                text-align: center;
                padding: 0 0.24rem;
              }

              .schoolTitle {
                margin-left: 0.24rem;
              }

            }

            .lookAndAnswer {
              border-top: 1px solid #E5E8ED;
              padding-top: 0.24rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              p {
                color: #999;
                font-size: 0.28rem;
                line-height: 0.4rem;
              }
              .turnRight {
                width: 0.4rem;
                height: 0.4rem;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }


          }

          .hasAnswer { 
            background: url('~/static/images/pic_reply.png') no-repeat;
            background-size: 100% 100%;
          }
          .waitAnswer { 
            background: url('~/static/images/pic_wait_reply.png') no-repeat;
            background-size: 100% 100%;
          }

        }
      }
    }

    .imgIcon{
      width: 0.4rem;
      height: 0.4rem;
    }

  }  
</style>
